<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新闻列表示例</title>
<link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-base.js">
</script>
<script type="text/javascript" src="ext/ext-all.js">
</script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js">
</script>

<script  type="text/javascript">
Ext.onReady(function (){
//避免到官方下载图片
Ext.BLANK_IMAGE_URL ="ext/resources/images/default/s.gif";

var sm = new Ext.grid.CheckboxSelectionModel();//复选框
var cm = new Ext.grid.ColumnModel([
	
	
     {header:'编号',dataIndex:'id',width:120},
     {header:'性别',dataIndex:'sex',width:90},
     {header:'名称',dataIndex:'name',width:90},
     {header:'描述',dataIndex:'descn',width:90},
      sm
]);
cm.defaultSortable = true;


//JsonData
var data = { 
    'coders': [
        { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
        { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
        { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },
        { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
    ],
    'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
};

//创建单选框



// ArrayReader
var ds = new Ext.data.Store({
  proxy: new Ext.data.HttpProxy({url:'/Ext/servlet/GridServlet'}),

	
    reader: new Ext.data.JsonReader({
	
	 		//totalProperty: 'totalProperty',
	 		
            root: 'root'

	
	}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])

});
ds.load();




var grid = new Ext.grid.GridPanel({
   // el: 'grids', //显示在什么地方
     ds: ds,// 数据源
     cm: cm, //表格的显示形式或者是表头
     sm:sm,
	 renderTo:'grids',
	 autoHeight: true,
	 autoWidth:true,
	 frame: true,
	 tbar:[{
	 text : '新增',
   	 iconCls : 'add'
	
	 },{
	 text:'删除',
	 iconCls:'delete',
	 handler:function(){
	
		//Ext.MessageBox.alert('警告','你确定要删除所选择的吗?');
	grid.getStore().remove(sm.getSelected());
	//sm.getSelection()
		//grid.getView().refresh();
	 
	 } 
	 
	 }]
	 
});
grid.render();







});




</script>





</head>
<body>
<div id="grids"></div>

</body>
</html>
